<!-- 分页组件 -->
<template>
  <el-pagination
    class="mt-4"
    :page-index="pageIndex"
    :page-size="pageSize"
    :total="total"
    :page-sizes="pageSizes"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handlePageIndex"
  />
</template>

<script setup>
const props = defineProps({
  pageIndex: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 0,
  },
  pageSizes: {
    type: Array,
    default: () => [5,10, 20, 50],
  },
});

const emit = defineEmits(['update:pageIndex', 'update:pageSize', 'page-change']);

const handleSizeChange = (newSize) => {
  emit('update:pageSize', newSize);
  emit('page-change', 1, newSize);
};

const handlePageIndex = (newPage) => {
  emit('update:pageIndex', newPage);
  emit('page-change', newPage, props.pageSize);
};
</script>